<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Limit eShop</title>
	<link rel="shortcut icon" href="icon.svg">
    <link rel="stylesheet" href="Limit eShop.css">
	<link rel="stylesheet" href="登陆注册.css">
	<link rel="stylesheet" href="to-top.css">
	<style>
		#buy {
			
			background-color: white;
			color: #f03752;
			border:1px solid #f03752;
			padding: 3px 8px 3px 8px;
			border-radius: 5px;
			-webkit-transition: all .2s;
			transition: all .2s;
		}
		#buy:hover {
			color: white;
			background-color: #f03752;
		}
		#buy2 {
			font-size: 20px;
			background-color: #f03752;
			color: white;
			border:1px solid #f03752;
			padding: 12px 48px 12px 48px;
			border-radius: 5px;
			-webkit-transition: all .2s;
			transition: all .2s;
		}
		#buy2:hover {
			color: white;
			background-color: #f03752;
		}
		#item_detail {
			
			background-color: white;
			font-size: 16px;
			color: #f03752;
			border:1px solid #f03752;
			padding: 3px 8px 3px 8px;
			border-radius: 5px;
			-webkit-transition: all .2s;
			transition: all .2s;
				}
		#item_detail:hover {
			color: white;
			background-color: #f03752;
				}
		.bottom_tips a:link {text-decoration:none;}    /* unvisited link */
		.bottom_tips a:visited {text-decoration:none;} /* visited link */
		.bottom_tips a:hover {text-decoration:underline;color: grey;}   /* mouse over link */
		.bottom_tips a:active {text-decoration:underline;}  /* selected link */
	
		.bottom_box ul a:link {text-decoration:none;color: black;}    /* unvisited link */
		.bottom_box ul a:visited {text-decoration:none;color: black;} /* visited link */
		.bottom_box ul a:hover {text-decoration:underline;color: black;}   /* mouse over link */
		.bottom_box ul a:active {text-decoration:underline;color: black;}  /* selected link */
	</style>
</head>


<body>
	<div class="success" id="success_box">√ Added to Cart</div>
	<div class="opacity_bg"></div>
    <a class="fly-to-top" id="fly-to-top-id" title="返回顶部" href="#"></a>
			
        <ul class="daohang">
			<li class="daohang_xiangmu"><a href="#pay">Checkout</a></li>
            <li class="daohang_xiangmu"><a href="#uid">Fill in the information</a></li>
            <li class="daohang_xiangmu"><a href="#cart" id="end">Cart(<span class="total_num2">0</span>)</a></li>
            <li class="daohang_xiangmu2"><b>Limit eShop</b></li>
        </ul>


<div>
	<div class="hengfu">
		<div class="hengfu_text_box">
			<div class="hengfu_text">
			Welcome to Limit eShop！Free shipping over ￥199~
			</div>
		</div>
	</div>
	<div class="close_hengfu_box">
			<button class="close_hengfu">×</button></div>
		</div>
</div>

<div class="language">
	<div class="dropdown">
		<div class="dropbtn"><img src="src/assets/US.png" height="21px" style="vertical-align: middle;margin-top: -3px;" alt="US"> English</div>
		<div class="dropdown-content">
		<a href="index.html"><img src="src/assets/CN.png" height="21px" style="vertical-align: middle;margin-top: -3px;margin-left: -3px;" alt="CN">简体中文</a>
		</div>
	</div>
</div>


    <div class="search bar">
        <form class="search_form">
            <input class="search_input" id="myInput" onkeyup="Search()" placeholder="The input will automatically match the product you need..." name="cname" type="text">
            <button class="search_button" type="button"><img src="src/assets/search.png" height="30px" alt=""></button>
        </form>
    </div>
	
	
	
	
	
	
	
	
    <div class="title" id="items"><b>All Products</b></div>
	
    <!-- ↓商品以折叠 -->
	<div class="main">
		
        <div class="item">
            <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						Myethos VOCALOID 初音未来 韶华 手办 附独家特典
					</div>
				</div>
			</div>
            <div><img id="item_pic" src="src/assets/Myethos VOCALOID 初音未来 韶华 手办 附独家特典.jpg" width="100%" height="100%"></div>
            <div class="item_price">￥999</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p001">Details</a>
            <a href="javascript:void(0)" class="buy" id="buy" data-pid="p001" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
        </div>
		
        <div class="item">
            <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						TAITO 路人女主的养成方法 加藤惠 女主角Ver. 景品手办
					</div>
				</div></div>
            <div><img src="src/assets/TAITO 路人女主的养成方法 加藤惠 女主角Ver. 景品手办.jpg" width="100%" height="100%"></div>
            <div class="item_price">￥99</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p002">Details</a>
            <a href="javascript:void(0)" class="buy" id="buy" data-pid="p002" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
        </div>
		
        <div class="item">
            <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						角川KD Colle 86-不存在的战区- 弗拉迪蕾娜•米丽洁 手办
					</div>
				</div>
			</div>
            <div><img src="src/assets/角川KD Colle 86-不存在的地域- 弗拉迪蕾娜•米丽洁 手办.jpg" width="100%" height="100%"></div>
            <div class="item_price">￥1099</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p003">Details</a>
            <a href="javascript:void(0)" class="buy" id="buy" data-pid="p003" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
        </div>
		
        <div class="item">
            <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						Max Factory 莱莎的炼金工作室～常暗女王与秘密藏身处～ 莱莎琳•斯托特 手办
					</div>
				</div>
			</div>
            <div><img src="src/assets/Max Factory 莱莎的炼金工作室～常暗女王与秘密藏身处～ 莱莎琳•斯托特 手办.jpg" width="100%" height="100%"></div>
            <div class="item_price">￥1409</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p004">Details</a>
            <a href="javascript:void(0)" class="buy" id="buy" data-pid="p004" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
        </div>
		
        <div class="item">
            <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						SSF 我的青春恋爱物语果然有问题 雪之下雪乃＆由比滨结衣 Ending Ver. 手办
					</div>
				</div>
			</div>
            <div><img src="src/assets/SSF 我的青春恋爱物语果然有问题 雪之下雪乃＆由比滨结衣 Ending Ver.手办.jpg" width="100%" height="100%"></div>
            <div class="item_price">￥1938</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p005">Details</a>
            <a href="javascript:void(0)" class="buy" id="buy" data-pid="p005" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
        </div>
		
		
		<div class="item">
		    <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						Union Creative SSSS.DYNAZENON 南梦芽 泳装ver. 手办 附特典
					</div>
				</div>
			</div>
		    <div><img src="src/assets/Union Creative SSSS.DYNAZENON 南梦芽 泳装ver. 手办 附特典.jpg" width="100%" height="100%"></div>
		    <div class="item_price">￥599</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p006">Details</a>
		    <a href="javascript:void(0)" class="buy" id="buy" data-pid="p006" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
		</div>
		
		
		<div class="item">
		    <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						Phat!路人女主的养成方法 霞之丘诗羽 手办
					</div>
				</div>
			</div>
		    <div><img src="src/assets/Phat!路人女主的养成方法 霞之丘诗羽手办.jpg" width="100%" height="100%"></div>
		    <div class="item_price">￥755</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p007">Details</a>
		    <a href="javascript:void(0)" class="buy" id="buy" data-pid="p007" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
		</div>
		
		
		
		<div class="item">
		    <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						TAITO 青春猪头少年不会梦到免女郎学姐 樱岛麻衣 室内服ver. 景品手办 附特典
					</div>
				</div>
			</div>
		    <div><img src="src/assets/TAITO 青春猪头少年不会梦到免女郎学姐 樱岛麻衣 室内服ver. 景品手办 附特典.jpg" width="100%" height="100%"></div>
		    <div class="item_price">￥119</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p008">Details</a>
		    <a href="javascript:void(0)" class="buy" id="buy" data-pid="p008" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
		</div>
		
		<div class="item">
		    <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						Wonderful Works 菜莎的炼金工作室2 ～失落传说与秘密妖精～ 科洛蒂娅•巴兰茨 睡袍ver. 手办
					</div>
				</div>
			</div>
		    <div><img src="src/assets/wonderful works 菜莎的炼金工作室2 ～失落传说与秘密妖精～ 科洛蒂娅•巴兰茨 睡袍ver. 手办.jpg" width="100%" height="100%"></div>
		    <div class="item_price">￥1109</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p009">Details</a>
		    <a href="javascript:void(0)" class="buy" id="buy" data-pid="p009" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
		</div>
		
		<div class="item">
		    <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						Max Factory 路人女主的养成方法 霞之丘诗羽 手办
					</div>
				</div>
			</div>
		    <div><img src="src/assets/Max Factory 路人女主的养成方法 霞之丘诗羽 手办.png" width="100%" height="100%"></div>
		    <div class="item_price">￥1219</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p010">Details</a>
		    <a href="javascript:void(0)" class="buy" id="buy" data-pid="p010" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
		</div>
		
		<div class="item">
		    <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						世嘉 Luminasta 更衣人偶坠入爱河 喜多川海梦 放课后ver. 景品手办
					</div>
				</div>
			</div>
		    <div><img src="src/assets/世嘉 Luminasta 更衣人偶坠入爱河 喜多川海梦 放课后ver. 景品手办.png" width="100%" height="100%"></div>
		    <div class="item_price">￥109</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p011">Details</a>
		    <a href="javascript:void(0)" class="buy" id="buy" data-pid="p011" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
		</div>
		
		<div class="item">
		    <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						Mvethos 哔哩哔哩 良辰美景不问天 22 主题手办
					</div>
				</div>
			</div>
		    <div><img src="src/assets/Mvethos 哔哩哔哩 良辰美景不问天 22 主题手办.png" width="100%" height="100%"></div>
		    <div class="item_price">￥999</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p012">Details</a>
		    <a href="javascript:void(0)" class="buy" id="buy" data-pid="p012" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
		</div>
		
		<div class="item">
		    <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						Mvethos 哔哩哔哩 良辰美景不问天 33 主题手办
					</div>
				</div>
			</div>
		    <div><img src="src/assets/Mvethos 哔哩哔哩 良辰美景不问天 33 主题手办.png" width="100%" height="100%"></div>
		    <div class="item_price">￥999</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p013">Details</a>
		    <a href="javascript:void(0)" class="buy" id="buy" data-pid="p013" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
		</div>
		
		<div class="item">
		    <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						TAITO 魔女之旅 伊蕾娜 睡衣ver. 景品手办
					</div>
				</div>
			</div>
		    <div><img src="src/assets/TAITO 魔女之旅 伊蕾娜 睡衣ver. 景品手办.jpg" width="100%" height="100%"></div>
		    <div class="item_price">￥109</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p014">Details</a>
		    <a href="javascript:void(0)" class="buy" id="buy" data-pid="p014" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
		</div>
		
		<div class="item">
		    <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						角川 侦探已死 谢丝塔 猫耳女仆ver. 手办
					</div>
				</div>
			</div>
		    <div><img src="src/assets/角川 侦探已死 谢丝塔 猫耳女仆ver. 手办.png" width="100%" height="100%"></div>
		    <div class="item_price">￥999</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p015">Details</a>
		    <a href="javascript:void(0)" class="buy" id="buy" data-pid="p015" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
		</div>
		
		<div class="item">
		    <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						TAITO 青春猪头少年不会梦到免女郎学姐 牧之原翔子 景品手办
					</div>
				</div>
			</div>
		    <div><img src="src/assets/TAITO 青春猪头少年不会梦到免女郎学姐 牧之原翔子 景品手办.png" width="100%" height="100%"></div>
		    <div class="item_price">￥99</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p016">Details</a>
		    <a href="javascript:void(0)" class="buy" id="buy" data-pid="p016" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
		</div>
		
		<div class="item">
		    <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						TAITO Angel Beats! 立华奏 景品手办
					</div>
				</div>
			</div>
		    <div><img src="src/assets/TAITO Angel Beats! 立华奏 景品手办.png" width="100%" height="100%"></div>
		    <div class="item_price">￥109</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p017">Details</a>
		    <a href="javascript:void(0)" class="buy" id="buy" data-pid="p017" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
		</div>
		
		<div class="item">
		    <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						TAITO AFG 我的青春恋爱物语果然有问题 由比滨结衣 景品手办
					</div>
				</div>
			</div>
		    <div><img src="src/assets/TAITO AFG 我的青春恋爱物语果然有问题 由比滨结衣 景品手办.png" width="100%" height="100%"></div>
		    <div class="item_price">￥109</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p018">Details</a>
		    <a href="javascript:void(0)" class="buy" id="buy" data-pid="p018" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
		</div>
		
		<div class="item">
		    <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						TAITO AFG 我的青春恋爱物语果然有问题 雪之下雪乃 景品手办
					</div>
				</div>
			</div>
		    <div><img src="src/assets/TAITO AFG 我的青春恋爱物语果然有问题 雪之下雪乃 景品手办.png" width="100%" height="100%"></div>
		    <div class="item_price">￥99</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p019">Details</a>
		    <a href="javascript:void(0)" class="buy" id="buy" data-pid="p019" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
		</div>
		
		<div class="item">
		    <div class="item_name">
				<div class="scroll-wrap">
					<div class="scroll-item">
						NO INFO.
					</div>
				</div>
			</div>
		    <div><img src="src/assets/nodata.png" width="100%" height="100%"></div>
		    <div class="item_price">￥--</div>
			<a href="javascript:void(0)" class="item_detail" id="item_detail" data-pid="p020">Details</a>
		    <a href="javascript:void(0)" class="buy" id="buy" data-pid="p020" onclick="addcart_effect()">Add to Cart</a>
			<p></p>
		</div>
		
		
		
		




<!-- 商品部分结束 -->
    </div>
	
	<!-- 无更多商品提示 -->
	<div id="search_tips">
			Sorry, there are no more products that match the keyword. T_T
		</div>
		
		
		
		
		
		
		
    <div class="title" id="cart"><b>Cart</b></div>
        <div class="cart">
            <table class="cart_table" id="cart_table">
                <thead>
                    <tr>
						<td class="thead_td1"><input type="checkbox" class="pid" style="width: 0px;height: 0px;"><b>Check</b></td>
                        <td class="thead_td2"><b>&nbsp;Products Info.</b></td>
                        <td class="thead_td2"><b>&nbsp;Unit Price</b></td>
                        <td class="thead_td2"><b>&nbsp;Quantity</b></td>
                        <td class="thead_td2"><b>&nbsp;Subtotal</b></td>
                        <td class="thead_td1"><b>&nbsp;Operate</b></td>
                    </tr>
                </thead>
				
				<!-- 空行 -->
				<tr class="cart_item">
					<td><input type="checkbox" class="pid" style="width: 0px;height: 0px;"></td>
					<td>
						<img class="cart_img" src="">
						<span class="pname"></span>
					</td>
					<td class="price"></td>
					<td>
						Free shipping over <span style="color: #f03752;"><b>￥199</b></span>
					</td>
					<td class="count"></td>
					<td><a href="javascript:void{0}" class="clear">Empty the cart</a></td>
				</tr>
				
                <template class="cart_item" id="temp">
					<tr data-pid="{{pid}}">
						<td><input type="checkbox" class="pid" checked="checked"></td>
						<td>
							<div class="cart_pic">
								<img class="cart_img" src="{{src}}">
							</div>
							<div class="cart_name">
								<span class="pname">{{pname}}</span>
							</div>
						</td>
						<td class="price">&yen;{{price}}</td>
						<td>
							<button class="sub">-</button>
							<input type="text" class="number" value="1"/>
							<button class="add">+</button>
						</td>
						<td class="count">&yen;{{price}}</td>
						<td><a href="javascript:void{0}" class="del">Delete</a></td>
					</tr>
				</template>
            </table>
        </div>
				
		<div class="orders_total">
			<p class="total_text"><b>
				<span class="total_num">0</span>&nbsp;Products,
				Total
				<span class="total_money">&yen;0</span></b>
			</p>
		</div>
		
		
		
		
		
		
		
		<div class="title" id="uid"><b>Fill in the information</b></div>
		<div class="info_main_box">
			<div class="container_info">
				<div class="form_box">
					<div class="info_box ">
						<h1 class="info_title">Fill in the receipt information</h1>
						<!-- <form> -->
						<input class="info_input" id="name_input" type="text" placeholder="Name...">
						<input class="info_input" id="phone_input" type="text" placeholder="Phone number...">
						<input class="info_input" id="address_input" type="text" placeholder="Address...">
					<!-- 	</form> -->
						<button id="info_button" onclick="changeColor1()"><b>Submit</b></button>
						
						<p id="info_text"></p>
					</div>
					<div class="login_box hidden">
						<h2 class="login_title">Login Limit Account</h2>
						<input class="info_input" type="text" placeholder="User name...">
						<input class="info_input" type="password" placeholder="Password...">
						<button id="login_button" onclick="changeColor2()"><b>Get receipt information</b></button>
						<p id="login_text"></p>
					</div>
				</div>
				<div class="con-box right">
					<p>Have a Limit Account?<br /><br />Log in to get the<br />delivery address<br />with one click!</p>
					<button class="con-box-button" id="login">Go to Login</button>
				</div>
				<div class="con-box left">
					<p>Don't have a Limit Account yet?<br /><br />Click Back<br />to fill in the information<br /><br />Or<br /><br />Sign up<br />for follow-up convenience!</p>
					<button class="con-box-button">Sign up</button>
					<button class="con-box-button" id="info">Return to fill in</button>
				</div>
			</div>
		</div>
		
		
		
		
		
		
		
		
		<div class="title" id="pay"><b>Checkout</b></div>
		<div class="pay_main_box">
			<div style="font-size: 25px;"><span style="color: #f03752;font-size: 25px;"><b>|</b></span>Order Information</div>
			<div class="orders_total">
				<p class="total_text"><b>
					<span class="total_num">0</span>&nbsp;Products,
					
					<span class="total_money2">&yen;0</span>&nbsp;is required.</b>
					(<span class="yunfei">&yen;0</span>&nbsp;shipping included)
				</p>
			</div>
			<br/>
			<div style="font-size: 25px;"><span style="color: #f03752;font-size: 25px;"><b>|</b></span>Recipient information</div><br/>
				<span style="margin-left: 200px;">Name:</span>&emsp;<span id="name_output">*NO DATA.*</span><br/><br/>
				<span style="margin-left: 200px;">Phone number:</span>&emsp;<span id="phone_output">*NO DATA.*</span><br/><br/>
				<span style="margin-left: 200px;">Adreess:</span>&emsp;<span id="address_output">*NO DATA.*</span><br/>
				<br/>
			<div style="font-size: 25px;"><span style="color: #f03752;font-size: 25px;"><b>|</b></span>Payment Methods</div>
				<form class="pay_form">
					<label><input type="radio" name="pay_method" value="1" />&emsp;<img src="src/assets/wechat_pay.svg" height="34px"/></label>
					<label><input type="radio" name="pay_method" value="2"/>&emsp;<img src="src/assets/Ali_pay.png" height="34px"/><br/></label>
					<label><input type="radio" name="pay_method" value="3" style="margin-left: -260px;"/>&emsp;<img src="src/assets/paypal.svg" height="34px"/></label>
				</form>
				<br/>
				<div class="go_to_pay_box">
					<button id="jump_to_pay" class="go_to_pay" onclick="jump()">Submit the order.</button>
				</div>
		</div>
		<br/>
		
		<!-- 确认支付弹窗 -->
		<div id="pay_check" class="pay_check">
			<img src="src/assets/问号.svg" height="200px" style="z-index: -1;" alt="?">
			<div class="pay_check_text">Was the payment successful?</div>
			<button class="pay_fail_button" onclick="pay_fail()">NO</button>
			<button class="pay_success_button" onclick="pay_success()">YES</button>
		</div>
		<!-- 商品详情 -->
    
		<div class="detail_box" id="detail_box">
			<template class="detail_box_main" id="temp2">
				<div data-pid="{{pid}}">
					<div class="detail_close"><button class="close">×</button></div>
					<div class="detail_pic"><img src="{{src}}" width="100%"></div>
					<div class="detail_text">
						<div class="detail_text_content">
							<div class="detail_text_name1"><b>Name：</b></div>
							<div class="detail_text_name2">{{pname}}</div>
							<div class="detail_text_name1"><b>Brand：</b></div>
							<div class="detail_text_name2">{{band}}</div>
							<div class="detail_text_name1"><b>IP：</b></div>
							<div class="detail_text_name2">{{ip}}</div>
							<div class="detail_text_name1"><b>Size：</b></div>
							<div class="detail_text_name2">{{size}}</div>
							<div class="detail_text_name1"><b>Ratio：</b></div>
							<div class="detail_text_name2">{{scale}}</div>
							<div class="detail_text_name1"><b>Material：</b></div>
							<div class="detail_text_name2">{{material}}</div>
						</div>
						<div class="detail_price"><b>&yen;{{price}}</b></div>
						<div class="detail_buy"><a href="javascript:void(0)" class="buy2" id="buy2" onclick="addcart_effect2()">Add to Cart</a></div>
					</div>
				</div>
			</template>	
		</div>
	
	<!-- 底栏 -->
		<div class="bottom">
			<div class="bottom_float">	
				<div class="bottom_box">
					<ul>
					<li class="b_head">Limit eShop Serve</li>
					<li class="b_li2">Shopping process</li>
					<li class="b_li2">Frequently asked questions</li>
					<li class="b_li2">Contact customer service</li>
				</ul>
				</div>
				
				<div class="bottom_box">
					<ul>
					<li class="b_head">About Limit</li>
					<a href="About eShop.html"><li class="b_li2">About us</li></a>
					<a href="About eShop.html"><li class="b_li2">Contact us</li></a>
					<li class="b_li2">User Agreement</li>
					<li class="b_li2">Privacy Policy</li>
				</ul>
				</div>
				
				<div class="bottom_box">
					<ul>
					<li class="b_head">Portals</li>
					<a href="../Limit Website.html"><li class="b_li2">Limit Website</li></a>
				</ul>
				</div>
			</div>
			<div class="bottom_tips">
				<!-- <span>消费者维权热线：4006067733</span>
				<span>&emsp;|&emsp;</span>
				<span>消费者协会投诉电话：12315</span>
				<span>&emsp;|&emsp;</span>
				<span>违法和不良信息举报电话：4006561155</span>
				<span>&emsp;|&emsp;</span>
				<span>网上有害信息举报专区:</span>
				<a href="https://www.12377.cn/" target="_blank">
					<img src="src/assets/12377_logo.png" height="10px" alt="12377">
					<span>中国互联网违法和不良信息举报中心</span>
				</a><br/> -->
				<span>Translated by Eric Demisse.&emsp;&emsp;Designed by Eric Demisse.&emsp;&emsp;Copyright © 2022-2023 ZNF. All Rights Reserved.</span>
			</div><br/>
			
		</div>
		
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// ↓商品数据已折叠
			var datas = {
			    // 添加容器
			    p001:{	pname:'Myethos VOCALOID 初音未来 韶华 手办 附独家特典',
						price:999,
						src:'src/assets/Myethos VOCALOID 初音未来 韶华 手办 附独家特典.jpg',
						band:'Myethos VOCALOID',
						ip:'虚拟歌手',
						size:'高约250mm（含底座）',
						scale:'*暂无数据 NO DATA.*',
						material:'PVC;ABS'
					},
			    p002:{	pname:'TAITO 路人女主的养成方法 加藤惠 女主角Ver. 景品手办',
						price:99,
						src:'src/assets/TAITO 路人女主的养成方法 加藤惠 女主角Ver. 景品手办.jpg',
						band:'TAITO',
						ip:'路人女主的养成方法',
						size:'高约200mm',
						scale:'*暂无数据 NO DATA.*',
						material:'PVC;ABS'
					},
			    p003:{	pname:'角川KD Colle 86-不存在的战区- 弗拉迪蕾娜•米丽洁 手办',
						price:1099,
						src:'src/assets/角川KD Colle 86-不存在的地域- 弗拉迪蕾娜•米丽洁 手办.jpg',
						band:'角川KD Colle',
						ip:'86-不存在的战区-',
						size:'高约230mm',
						scale:'1/7',
						material:'PVC;ABS',
					},
			    p004:{	pname:'Max Factory 莱莎的炼金工作室～常暗女王与秘密藏身处～ 莱莎琳•斯托特 手办',
						price:1409,
						src:'src/assets/Max Factory 莱莎的炼金工作室～常暗女王与秘密藏身处～ 莱莎琳•斯托特 手办.jpg',
						band:'Max Factory',
						ip:'炼金工作室系列',
						size:'高约165mm',
						scale:'1/6',
						material:'PVC',
					},
				p005:{	pname:'SSF 我的青春恋爱物语果然有问题 雪之下雪乃＆由比滨结衣 Ending Ver. 手办',
						price:1938,
						src:'src/assets/SSF 我的青春恋爱物语果然有问题 雪之下雪乃＆由比滨结衣 Ending Ver.手办.jpg',
						band:'SSF',
						ip:'我的青春恋爱物语果然有问题',
						size:'高约236mm',
						scale:'1/7',
						material:'ABS;PVC',
					},
				p006:{	pname:'Union Creative SSSS.DYNAZENON 南梦芽 泳装ver. 手办 附特典',
						price:599,
						src:'src/assets/Union Creative SSSS.DYNAZENON 南梦芽 泳装ver. 手办 附特典.jpg',
						band:'Union Creative',
						ip:'SSSS.DYNAZENON',
						size:'高约24cm',
						scale:'*暂无数据 NO DATA.*',
						material:'PVC;ABS;ATBC',
					},
				p007:{	pname:'Phat!路人女主的养成方法 霞之丘诗羽 手办',
						price:755,
						src:'src/assets/Phat!路人女主的养成方法 霞之丘诗羽手办.jpg',
						band:'Phat!',
						ip:'路人女主的养成方法',
						size:'高约260mm',
						scale:'1/7',
						material:'塑料',
					},
				p008:{	pname:'TAITO 青春猪头少年不会梦到免女郎学姐 樱岛麻衣 室内服ver. 景品手办 附特典',
						price:119,
						src:'src/assets/TAITO 青春猪头少年不会梦到免女郎学姐 樱岛麻衣 室内服ver. 景品手办 附特典.jpg',
						band:'TAITO',
						ip:'青春猪头少年不会梦到免女郎学姐',
						size:'高约120mm',
						scale:'*暂无数据 NO DATA.*',
						material:'PVC;ABS',
					},
				p009:{	pname:'Wonderful Works 菜莎的炼金工作室2 ～失落传说与秘密妖精～ 科洛蒂娅•巴兰茨 睡袍ver. 手办',
						price:1109,
						src:'src/assets/wonderful works 菜莎的炼金工作室2 ～失落传说与秘密妖精～ 科洛蒂娅•巴兰茨 睡袍ver. 手办.jpg',
						band:'Wonderful Works',
						ip:'炼金工作室系列',
						size:'高约150mm',
						scale:'1/7',
						material:'塑料',
					},
				p010:{	pname:'Max Factory 路人女主的养成方法 霞之丘诗羽 手办',
						price:1219,
						src:'src/assets/Max Factory 路人女主的养成方法 霞之丘诗羽 手办.png',
						band:'Max Factory',
						ip:'路人女主的养成方法',
						size:'全高约210mm',
						scale:'*暂无数据 NO DATA.*',
						material:'PVC;ABS',
					},
				p011:{	pname:'世嘉 Luminasta 更衣人偶坠入爱河 喜多川海梦 放课后ver. 景品手办',
						price:109,
						src:'src/assets/世嘉 Luminasta 更衣人偶坠入爱河 喜多川海梦 放课后ver. 景品手办.png',
						band:'世嘉',
						ip:'更衣人偶坠入爱河',
						size:'高约190mm',
						scale:'*暂无数据 NO DATA.*',
						material:'PVC;ABS',
					},
				p012:{	pname:'Mvethos 哔哩哔哩 良辰美景不问天 22 主题手办',
						price:999,
						src:'src/assets/Mvethos 哔哩哔哩 良辰美景不问天 22 主题手办.png',
						band:'Mvethos',
						ip:'哔哩哔哩',
						size:'高约225mm',
						scale:'*暂无数据 NO DATA.*',
						material:'PVC;ABS;玻璃;金属;其他',
					},
				p013:{	pname:'Mvethos 哔哩哔哩 良辰美景不问天 33 主题手办',
						price:999,
						src:'src/assets/Mvethos 哔哩哔哩 良辰美景不问天 33 主题手办.png',
						band:'Mvethos',
						ip:'哔哩哔哩',
						size:'高约225mm',
						scale:'*暂无数据 NO DATA.*',
						material:'PVC;ABS;玻璃;金属;其他',
					},
				p014:{	pname:'TAITO 魔女之旅 伊蕾娜 睡衣ver. 景品手办',
						price:109,
						src:'src/assets/TAITO 魔女之旅 伊蕾娜 睡衣ver. 景品手办.jpg',
						band:'TAITO',
						ip:'魔女之旅',
						size:'高约120mm',
						scale:'*暂无数据 NO DATA.*',
						material:'PVC;ABS',
					},
				p015:{	pname:'角川 侦探已死 谢丝塔 猫耳女仆ver. 手办',
						price:999,
						src:'src/assets/角川 侦探已死 谢丝塔 猫耳女仆ver. 手办.png',
						band:'角川',
						ip:'侦探已死',
						size:'高约210mm',
						scale:'*暂无数据 NO DATA.*',
						material:'PVC',
					},
				p016:{	pname:'TAITO 青春猪头少年不会梦到免女郎学姐 牧之原翔子 景品手办',
						price:99,
						src:'src/assets/TAITO 青春猪头少年不会梦到免女郎学姐 牧之原翔子 景品手办.png',
						band:'TAITO',
						ip:'青春猪头少年不会梦到免女郎学姐',
						size:'高约180mm',
						scale:'*暂无数据 NO DATA.*',
						material:'PVC;ABS',
					},
				p017:{	pname:'TAITO Angel Beats! 立华奏 景品手办',
						price:99,
						src:'src/assets/TAITO Angel Beats! 立华奏 景品手办.png',
						band:'TAITO',
						ip:'Angel Beats!',
						size:'高约180mm',
						scale:'*暂无数据 NO DATA.*',
						material:'PVC;ABS',
					},
				p018:{	pname:'TAITO AFG 我的青春恋爱物语果然有问题 由比滨结衣 景品手办',
						price:109,
						src:'src/assets/TAITO AFG 我的青春恋爱物语果然有问题 由比滨结衣 景品手办.png',
						band:'TAITO',
						ip:'我的青春恋爱物语果然有问题',
						size:'高约100mm',
						scale:'*暂无数据 NO DATA.*',
						material:'PVC;ABS',
					},
				p019:{	pname:'TAITO AFG 我的青春恋爱物语果然有问题 雪之下雪乃 景品手办',
						price:99,
						src:'src/assets/TAITO AFG 我的青春恋爱物语果然有问题 雪之下雪乃 景品手办.png',
						band:'TAITO',
						ip:'我的青春恋爱物语果然有问题',
						size:'高约100mm',
						scale:'*暂无数据 NO DATA.*',
						material:'PVC;ABS',
					},
				p020:{	pname:'愿者上钩',
						price:9999,
						src:'src/assets/nodata.png',
						band:'Limit eShop不负任何责任',
						ip:'傻子才买',
						size:'*数据损坏*',
						scale:'*数据损坏*',
						material:'*数据损坏*',
					},
				
				
			}
			
			
			// 点击购买
			$('.buy').click(function(){
				var pid = $(this).attr('data-pid');
				// 得到点击的数据
				var info = datas[pid];
				var isExist = false;  //默认不存在
				// 遍历
				var index = 0;   //接受相对应的匹配的数据的索引
				$('tbody>tr').each(function(idx,ele){
					if(pid==$(ele).attr('data-pid')){
						// 该默认值为true
						isExist = true;
						index = idx;
					}
				})
				if(isExist){
					$('tbody>tr').eq(index).find('.add').trigger('click')
				}
				else{
					var html1 = $('#temp').html();
					html1 = html1.replace('{{pid}}',pid);
					html1 = html1.replace('{{src}}',info.src);
					html1 = html1.replaceAll('{{price}}',info.price);	//替换单价
					// html1 = html1.replace('{{price}}',info.price);	//替换小计（一个replace只能替换一个）
					// html1 = html1.replaceAll('{{price}}',info.price);  //可使用replaceAll，但可能浏览器并不兼容
					html1 = html1.replace('{{pname}}',info.pname);
					//拼接
					$('tbody').append($(html1));
				}
				
				calTotal();
				
			})
			
			// 打开详情页以及详情页内点击购买

			$('.item_detail').click(function(){
				$(".opacity_bg").show(); // 显示背景层,覆盖当前页面内容
				var pid = $(this).attr('data-pid');
				// 得到点击的数据
				var info = datas[pid];
				var html2 = $('#temp2').html();
				html2 = html2.replace('{{pid}}',pid);
				html2 = html2.replace('{{pname}}',info.pname);
				html2 = html2.replaceAll('{{price}}',info.price);
				html2 = html2.replace('{{src}}',info.src);				
				html2 = html2.replace('{{band}}',info.band);
				html2 = html2.replace('{{ip}}',info.ip);
				html2 = html2.replace('{{size}}',info.size);
				html2 = html2.replace('{{scale}}',info.scale);
				html2 = html2.replace('{{material}}',info.material);
				//拼接
				$('.detail_box').append($(html2));
				
				$('.buy2').click(function(){
					var isExist = false;  //默认不存在
					// 遍历
					var index = 0;   //接受相对应的匹配的数据的索引
					$('tbody>tr').each(function(idx,ele){
						if(pid==$(ele).attr('data-pid')){
							// 该默认值为true
							isExist = true;
							index = idx;
						}
					})
					if(isExist){
						$('tbody>tr').eq(index).find('.add').trigger('click')
					}
					else{
						var html3 = $('#temp').html();
						html3 = html3.replace('{{pid}}',pid);
						html3 = html3.replace('{{src}}',info.src);
						html3 = html3.replaceAll('{{price}}',info.price);	//替换单价
						// html3 = html1.replace('{{price}}',info.price);	//替换小计（一个replace只能替换一个）
						// html1 = html1.replaceAll('{{price}}',info.price);  //可使用replaceAll，但可能浏览器并不兼容
						html3 = html3.replace('{{pname}}',info.pname);
						//拼接
						$('tbody').append($(html3));
					}
				calTotal();
				})
			})
			
			//关闭横幅
			$('div').on('click','.close_hengfu',function(){
					$(this).parent().parent().remove();
			})
			
			//关闭详情页
			$('div').on('click','.close',function(){
					$(this).parent().parent().remove();
					$(".opacity_bg").hide(); // 隐藏背景层
			})
							
							
			//删除
			$('table').on('click','.del',function(){
				var flag = confirm('Are you sure you want to delete this item?')
				if(flag){
					$(this).parent().parent().remove();
					$('.total_name').parent().remove();
				}
				calTotal();
			})
			
			
			
			//清空购物车
			$('table').on('click','.clear',function(){
				var flag = confirm('Are you sure you want to empty your cart?')
				if(flag){
					var tb = document.getElementById('cart_table');
					var rowNum=tb.rows.length;
					for (i=2;i<rowNum;i++)
					     {
					         tb.deleteRow(i);
					         rowNum=rowNum-1;
					         i=i-1;
					     }
				}
				calTotal();
			})
			
			
			//总金额 函数
			function calTotal(){
				var sum = 0;//总金额
				var sum = 0;//总金额(含运费)
				var count = 0;//数量
				var yunfei = 18;
				$('tbody>tr').each(function(idx,ele){
					//是否被选上
					var flag = $(ele).find('.pid')[0].checked;
					if(flag){
						sum += parseInt($(this).find('.count').html().substring(1));
						count += parseInt($(this).find('.number').val());
					}
				})
				if(sum>199||sum==0){
					yunfei = 0;
				}
				sum2 = parseInt(sum)+parseInt(yunfei)
				//赋值
				$('.total_money').html('&yen;'+sum);
				$('.total_money2').html('&yen;'+sum2);
				$('.total_num').html(count);
				$('.total_num2').html(count);
				$('.yunfei').html('&yen;'+yunfei);
			}
			
			//全选
			//因为不会实现所以直接阉割掉


			//点击选择框重新计算价格
			$('table').on('click','.pid',function(){
				calTotal();
			})
			
			
			//减少商品数量
			$('table').on('click','.sub',function(){
				var num = $(this).siblings('.number').val();
				if(num == 1){
					var flag = confirm('This action will directly delete this listing, are you sure to continue?');
					if(flag){
						$(this).parent().parent().remove();
					}
				}
				else{
					num--;
					//更新赋值
					$(this).siblings('.number').val(num);
					//单价的值
					var price = $(this).parent().siblings('.price').html().substring(1);
					//小计
					var result = calPrice(num,price);
					//赋值
					$(this).parent().siblings('.count').html('&yen;'+result);
					calTotal();
				}
			})
			
			
			//小计 函数
			function calPrice(num,price){
				return num*price;
			}
			
			
			//增加商品数量
			$('table').on('click','.add',function(){
				//number里面的值
				var num = $(this).siblings('.number').val();
				num++;
				//更新赋值
				$(this).siblings('.number').val(num);
				//单价的值
				var price = $(this).parent().siblings('.price').html().substring(1);
				//小计
				var result = calPrice(num,price);
				//赋值
				$(this).parent().siblings('.count').html('&yen;'+result);
				calTotal();
			})
						
			
			// 完善信息部分
			let login=document.getElementById('login');
			let info=document.getElementById('info');
			let form_box=document.getElementsByClassName('form_box')[0];
			let info_box=document.getElementsByClassName('info_box')[0];
			let login_box=document.getElementsByClassName('login_box')[0];
			
			info.addEventListener('click',()=>{
				form_box.style.transform='translateX(0%)';
				login_box.classList.add('hidden');
				info_box.classList.remove('hidden');
			})
			login.addEventListener('click',()=>{
				form_box.style.transform='translateX(80%)';
				info_box.classList.add('hidden');
				login_box.classList.remove('hidden');
			})
			
			//提交收货地址功能
			function changeColor1() {
							var p=document.getElementById("info_button");
							p.innerHTML="√ Submitted Successfully!";
							document.getElementById("info_button").style.color="green"
							document.getElementById("info_button").style.fontFamily="Misans"
							document.getElementById("info_button").style.backgroundColor="lightgreen"
							document.getElementById("info_button").style.fontSize="16px"
							document.getElementById("info_button").style.fontWeight="bold"
							document.getElementById("info_text").innerText="Slide down to complete the payment"
							document.getElementById("info_text").style.color="white"
							document.getElementById("info_text").style.fontWeight="bold"
							input_output();
						}
						
			function changeColor2() {
							var p=document.getElementById("login_button");
							p.innerHTML="√ Get Successful!";
							document.getElementById("login_button").style.color="green"
							document.getElementById("login_button").style.fontFamily="Misans"
							document.getElementById("login_button").style.backgroundColor="lightgreen"
							document.getElementById("login_button").style.fontSize="16px"
							document.getElementById("login_button").style.fontWeight="bold"
							document.getElementById("login_text").innerText="Slide down to complete the payment"
							document.getElementById("login_text").style.color="white"
							document.getElementById("login_text").style.fontWeight="bold"
						}
						
			//加入购物车提示
			function Movein() {
							document.getElementById("success_box").style.translate="0px 95px"
						}
			function Moveout() {
							document.getElementById("success_box").style.translate="0px 0px"
						}
						
			function addcart_effect(){
				Movein();
				setTimeout("Moveout()",2000 );  
			}
			function changeColor3() {
							var p=document.getElementById("buy2");
							p.innerHTML="√ Added to Cart";
							document.getElementById("buy2").style.color="#00A74A"
							document.getElementById("buy2").style.borderColor="#00A74A"							
							document.getElementById("buy2").style.backgroundColor="#B9DCD2"
							document.getElementById("buy2").style.fontWeight="bold"
							document.getElementById("buy2").style.fontFamily="Misans"
						}
			function changeColor4() {
							var p=document.getElementById("buy2");
							p.innerHTML="Add to Cart";
							document.getElementById("buy2").style.color="white"
							document.getElementById("buy2").style.borderColor="#f03752"
							document.getElementById("buy2").style.backgroundColor="#f03752"
							document.getElementById("buy2").style.fontWeight="normal"
							document.getElementById("buy2").style.fontFamily="Misans"
						}
			function addcart_effect2(){
				changeColor3();
				setTimeout("changeColor4()",1000 );  
			}
			
			
			
			//搜索功能V1.0
			function Search() {
			  // 声明变量
			  var input, filter, div1,div2, div3, a, i, txtValue;
			  input = document.getElementById('myInput');
			  filter = input.value.toUpperCase();
			  div1 = document.getElementsByClassName('item_name');
			  
			  div3 = document.getElementsByClassName('item');
			  // 循环遍历所有列表项，并隐藏那些与搜索查询不匹配的项
			  for (i = 0; i < div1.length; i++) {
			    a = div1[i].getElementsByClassName('scroll-item')[0];
			    txtValue = a.textContent || a.innerText;
			    if (txtValue.toUpperCase().indexOf(filter) > -1) {
			      div3[i].style.display = "";
				  var p=document.getElementById('search_tips');
				  p.style.display="none"
				  var n=document.getElementById('items');
				  n.innerHTML="All Products";
				  document.getElementById("items").style.fontWeight="bold"
			    } else {
			      div3[i].style.display = "none";
				  var p=document.getElementById('search_tips');
				  p.style.display="block"
				  var n=document.getElementById('items');
				  n.innerHTML="Search Results";
				  document.getElementById("items").style.fontWeight="bold"
			    }
			  }
			}
			
			//返回顶部火箭 js
			
			    // 当网页向下滑动 80px 出现 "返回顶部" 按钮
			    window.onscroll = function() {scrollFunction()};
			    function scrollFunction() {console.log(121);
			        if (document.body.scrollTop> 80 || document.documentElement.scrollTop> 80) {
			            document.getElementById("fly-to-top-id").style.display = "block";
			        } else {
			            document.getElementById("fly-to-top-id").style.display = "none";
			        }
			    }
				
				
				//获取输入的收获地址并自动填写
				var name_in = document.getElementById("name_input");
				var name_out = document.getElementById("name_output");
				var phone_in = document.getElementById("phone_input");
				var phone_out = document.getElementById("phone_output");
				var address_in = document.getElementById("address_input");
				var address_out = document.getElementById("address_output");
				function input_output(){
					name_out.innerHTML = name_in.value;
					phone_out.innerHTML = phone_in.value;
					address_out.innerHTML = address_in.value;
				}
				function jump(){
					var ident =$("input[name = 'pay_method']:checked").val();
				if(ident=='1'){ 
					window.open("wechat-pay page.html");
					pay_check();
				}
				else if(ident=='2'){
					window.open("Ali_pay page.html");
					pay_check();
				}
				else if(ident=='3'){
					window.open("paypal page.html");
					pay_check();
				}
				
				}
				//弹出确认支付窗口
				function pay_check (){
					$(".opacity_bg").show(); // 显示背景层,覆盖当前页面内容
					document.getElementById("pay_check").style.display="block";//显示
				}
				function pay_success (){
					window.open("pay_success.html")
					$(".opacity_bg").hide(); // 隐藏背景层
					document.getElementById("pay_check").style.display="none";//隐藏
					location.reload();
				}
				function pay_fail (){
					$(".opacity_bg").hide(); // 隐藏背景层
					document.getElementById("pay_check").style.display="none";//隐藏
				}
		</script>
</body>
</html>